﻿
@using Models;
@{
    ViewBag.Title = "微博首页";
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/MailList.js"></script>
    <script src="~/Scripts/weibo.js"></script>
    <script src="~/Scripts/tqq.js"></script>
    <script src="~/Content/dist/js/bootstrap.min.js"></script>
    <style>
        .content {
            width: 1300px;
            height: auto;
            margin: 0px auto;
            margin-top: 100px;
            box-shadow: 0px 12px 5px 8px rgba(102, 102, 102, 0.61);
        }
        /*头部*/
        .head-img {
            width: 1300px;
            height: 350px;
        }

        .hear-Hot {
            width: 1300px;
            height: 45px;
            /*background-color: #1587ca;*/
            background: linear-gradient(#75c3f1,#cdecff,#e7f6ff,#fff);
        }

            .hear-Hot ul li {
                float: left;
                list-style: none;
                width: 100px;
            }

        /*注册*/
        .regist {
            width: 350px;
            height: 550px;
            position: absolute;
            background-image: url('../../Images/11.jpg');
            margin-top: -350px;
            margin-left: 920px;
            border-radius: 10px;
            box-shadow: 0.5px 0.5px 1.5px 1.5px rgba(102, 102, 102, 0.61);
            display: none;
        }

            .regist:hover {
                -webkit-box-shadow: #ccc 0px 10px 10px;
                -moz-box-shadow: #ccc 0px 10px 10px;
                box-shadow: #ccc 0px 10px 10px;
                transition: box-shadow 0.2s;
            }

        .Login:hover {
            height: 46px;
            color: white;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.5s;
            -webkit-transition: opacity 0.5s;
        }
        /*中间部分*/
        .middle {
            width: 1300px;
            height: 800px;
            background-color: white;
        }

        .middel-left {
            width: 310px;
            height: 800px;
            float: left;
            border-right: 1px solid #d2d2d2;
        }
        /*中间部分------这些人在用微博*/
        .middle-left_img img {
            width: 60px;
        }

        .middle-left_img ul li {
            float: left;
            width: 80px;
            list-style: none;
            margin-left: 10px;
        }
        /*大家正在说*/
        .middel-right {
            width: 600px;
            height: 800px;
            float: left;
            margin-left: 15px;
        }

        .content--left {
            width: 100px;
            float: left;
            margin-left: 150px;
        }

        .middle-right_content {
            width: 800px;
            height: 100px;
        }

        .content--right {
            width: 500px;
        }



        .emailist {
            border: 1px solid #bdbdbd;
            border-radius: 4px;
            background-color: #fff;
            color: #666;
            font-size: 14px;
            list-style-type: 0;
            padding: 0;
            margin: 50px;
            overflow: hidden;
        }

            .emailist li {
                padding: 2px 11px;
                cursor: pointer;
            }

                .emailist .on, .emailist li:hover {
                    background-color: #eee;
                }



        /*大家都在说*/
        #tqq {
            WIDTH: 500px;
            OVERFLOW: hidden;
            POSITION: relative;
            HEIGHT: 700px;
        }

            #tqq UL {
                WIDTH: 95%;
                display: inline;
                LINE-HEIGHT: 22px;
                margin-left: 10px;
                POSITION: absolute;
                list-style: none;
            }

                #tqq UL LI {
                    FLOAT: left;
                    PADDING-BOTTOM: 14px;
                    WIDTH: 100%;
                    PADDING-TOP: 14px;
                    BORDER-BOTTOM: #d8d8d8 1px dashed
                }

                    #tqq UL LI img {
                        BORDER: #d2d2d2 1px solid;
                        FLOAT: left;
                        WIDTH: 50px;
                        PADDING-TOP: 1px;
                    }

                    #tqq UL LI .msg {
                        FLOAT: right;
                        WIDTH: 413px
                    }

                        #tqq UL LI .msg P {
                            FONT-SIZE: 14px
                        }

                        #tqq UL LI .msg .from {
                            FONT-SIZE: 12px;
                            COLOR: #999
                        }

        .middel-right-right {
            border-left: 1px solid #d2d2d2;
            width: 300px;
            height: 700px;
            float: left;
        }

        /*热点TOP*/
        .GzTop {
            border-image: linear-gradient(to right,#ffffff,#999) 1 10;
            margin: 0 auto;
            width: 280px;
            height: 30px;
            border-bottom: 2px solid rgba(102, 102, 102, 0.61);
            margin-left: 20px;
        }

        .topnum-four {
            width: 20px;
            height: 20px;
            background-color: #666;
            float: left;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            color: white;
            border-radius: 4px;
        }

        .top-num-con {
            float: left;
            margin-left: 15px;
            font-size: 15px;
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            color: black;
        }

        .userloginbtn {
            width: 200px;
            height: 50px;
            background: linear-gradient(#5D9CEC,#1587ca);
            margin-left: 80px;
            color: white;
            border-radius: 10px;
        }
    </style>
</head>
<body style=" background-image: url('../../Images/11.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
">
    <div style="border-radius:10px;">
        <div class="content">
            <div class="head">
                <div class="head-img">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <div style="position:absolute;z-index:5;width:1300px;height:20px;background-color:rgba(210, 210, 210, 0.35)">
                            <span style="color:white;font-size:15px;margin-left:10px;">★&nbsp;微博推广，欢迎入驻</span>
                        </div>
                        @*轮播（Carousel）指标*@
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="~/Images/Index-bg.jpg" alt="First slide" style="width:1500px;height:350px;">
                            </div>
                            <div class="item">
                                <img src="~/Images/Index-bg4.jpg" alt="Second slide" style="width:1500px;height:350px;">
                            </div>
                            <div class="item">
                                <img src="~/Images/Index-bg2.jpg" alt="Third slide" style="width:1500px;height:350px;">
                            </div>
                        </div>
                        @*轮播（Carousel）导航*@
                        <a class="carousel-control left" href="#myCarousel"
                           data-slide="prev"></a>
                        <a class="carousel-control right" href="#myCarousel"
                           data-slide="next"></a>
                    </div>
                </div>
                <div class="hear-Hot">
                    <div style="float:left; margin-left:25px;margin-top:10px;">
                        <img src="~/Images/Laba.png" style="height: 30px; width: auto; margin-bottom: 5px;" />
                        <span style="font-size:15px;color:#808080;">正在热议：</span>
                        <div class="Hear-hot-content" style="float:right; height:30px;width:1100px;">
                            <marquee>
                                <p style="font-family: Impact; font-size: 12pt;color:black;line-height:30px;">
                                    <a href="https://news.sina.com.cn/w/2020-06-08/doc-iirczymk5952623.shtml" style="color:#808080;">
                                        一气之下 特朗普自曝了这个美国的“大秘密”
                                    </a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <a href="https://news.sina.com.cn/c/2020-06-09/doc-iirczymk6025257.shtml" style="color:#808080;">
                                        林郑月娥：特区政府所有政治委任官员未来一年冻薪
                                    </a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <a href="https://news.sina.com.cn/c/2020-06-09/doc-iircuyvi7435796.shtml" style="color:#808080;">
                                        中央出手后，乱港头目慌忙与“港独”割席
                                    </a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </p>
                            </marquee>
                        </div>
                    </div>
                </div>
                <div class="regist" id="regists">
                    <input type="button" style="float:right;background-color:rgba(153, 153, 153, 0.39);border:none;color:white;" value="X" id="close" />
                    <script>
                        $(function () {
                            $("#close").click(function () {
                                $("#regists").show("show", function () {
                                    $(this).css({ "display": "none" })
                                })
                            })
                        })
                    </script>
                    <div id="msg" style="color:red;background-color:lightyellow;text-align:center;display:none;">
                        <p>登录名或密码错误</p>
                        <p> 1.如果登录名是邮箱地址，请输入全称，例如youname#33.com</p>
                        <p> 2.请检查登录名大小写是否正确 </p >
                        <p> 3.请检查密码大小写是否正确 </p>
                    </div>
                    
                        <button type="button" class="btn btn-success" style="width:250px;margin:0px auto;margin-top:50px;margin-left:50px;height:55px;background: linear-gradient(#62ec59,#357f30);border:1px solid #357f30;">立即注册微博</button><br />
                        <input type="text" name="LoginID" id="username" style="width: 250px; margin: 0px auto; margin-top: 50px;" class="inputMailList form-control" placeholder="邮箱/会员账号/手机号">
                        <input type="password" name="Pwd" id="pwd" style="width:250px;margin:0px auto;margin-top:50px;" class="form-control" placeholder="请输入密码"><br />
                        <div class="Checkbox-pwd" style="height:50px;width:250px;margin-left:50px;">
                            <input type="checkbox" style=" height:13px;width:13px; line-height:10px;" />
                            <span style="line-height:25px;color:#0574c4;">下次自动登录</span>
                            <a href="#" style="text-decoration:none;margin-left:80px;color:#0574c4;">找回密码</a>
                        </div>
                        <br />
                        <button type="submit" onclick="Login()" class="btn btn-primary btn-lg Login" style="margin-left:125px;background: linear-gradient(#7bc8ff,#044675);">微博登录</button>
                        <script>
                            function Login() {
                                var username = $("#username").val();
                                var pwd = $("#pwd").val();
                                $.ajax({
                                    url: "/Default/Login",
                                    data: { "name": username, "pwd": pwd }, 
                                    success: function (data) {
                                        if (data == "false") {
                                            $("#msg").show();
                                        } else {
                                            location.href ="/Default/Customer"
                                        }
                                        
                                    }
                                })
                            }
                        </script>
                </div>
            </div>
            <div class="middle">
                <div class="middel-left">
                    <div class="middel-right-title" style="border-bottom:1px solid #d2d2d2;height:50px;line-height:50px;width:250px;margin:0 auto;">
                        <img src="~/Images/King  (1).png" style="height:20px;width:20px;" />
                        <span style="font-weight:bold;">这些人正在用微博</span>
                    </div>
                    <div class="middle-left_img" style="width:310px;height:300px;">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="~/Images/WBXM.gif" />
                                </a>
                                <br />
                                微博小秘
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/头像1.jpg" />
                                </a>
                                <br />
                                用户123
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/头像1.jpg" />
                                </a>
                                <br />
                                你猜
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/LBXR.gif" />
                                </a>
                                <br />
                                用户abc
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/AXXR.gif" />
                                </a>
                                <br />
                                微博僵尸粉
                            </li>
                        </ul>
                    </div>
                    <div class="middel-right-title" style="border-bottom:1px solid #d2d2d2;height:50px;line-height:50px;width:250px;margin:0 auto;">
                        <img src="~/Images/King  (1).png" style="height:20px;width:20px;" />
                        <span style="font-weight:bold;">新加入的人</span>
                    </div>
                    <div class="middle-left_img" style="width:310px;height:300px;">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="~/Images/WBXM.gif" />
                                </a>
                                <br />
                                微博小秘
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/头像1.jpg" />
                                </a>
                                <br />
                                用户123
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/头像1.jpg" />
                                </a>
                                <br />
                                你猜
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/LBXR.gif" />
                                </a>
                                <br />
                                用户abc
                            </li>
                            <li>
                                <a href="#">
                                    <img src="~/Images/AXXR.gif" />
                                </a>
                                <br />
                                微博僵尸粉
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="middel-right">
                    @*<h3>大家正在说</h3>
                        <hr style="width:500px; float:left;color:#d2d2d2;"/>*@
                    <div class="middel-right-title" style="border-bottom:1px solid #d2d2d2;width:500px;height:50px;line-height:50px;">
                        <img src="~/Images/King  (2).png" style="height:20px;width:20px;" />
                        <span style="font-weight:bold;">大家都在说</span>
                    </div>
                    <div id="tqq" class="mF_sd_tqq">
                        <ul class="msgs">
                            @foreach (MicroBlog item in ViewBag.list)
                            {
                                <li>
                                    <div class="img">
                                        <img src="~/Images/头像1.jpg" />
                                    </div>
                                    <div class="msg">
                                        <p><strong><a>微博网用户</a></strong> @Html.Raw(Server.HtmlDecode(@item.M_Content))</p>
                                        <p class="from">来自<span>iPhone</span></p>
                                    </div>
                                </li>
                            }



                        </ul>
                    </div>
                </div>
                @*关注度top10*@
                <div class="middel-right-right">
                    <div class="UserLogin" style="width:300px;height:200px;">
                        <br />
                        <input class="userloginbtn" id="btnpx" type="button" value="点击登录" /><br /><br /><br />
                        <script>
                            $(function () {
                                $("#btnpx").click(function () {
                                    $("#regists").show("show", function () {
                                        $(this).css({ "color": "black" })
                                    })
                                })
                            })
                        </script>
                        <input class="userloginbtn" type="button" value="点击注册" />
                    </div>
                    <div class="GzTop">
                        <span style="margin-left:85px;font-weight:bold;font-size:20px;">关注度TOP</span>
                        <span style="color:darkred;font-weight:bold;font-size:20px;">10</span>
                    </div>
                    <div class="GzTop-content">
                        <ul style="list-style:none;">
                            <li>
                                <br />
                                <div class="topnum" style="width:20px;height:20px;background-color:darkred;float:left;text-align:center;font-size:15px;font-weight:bold;color:white;border-radius:4px;">1</div>
                                <a class="top-num-con" href="#">教育部发布留学预警</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum" style="width:20px;height:20px;background-color:red;float:left;text-align:center;font-size:15px;font-weight:bold;color:white;border-radius:4px;">2</div>
                                <a class="top-num-con" href="#">穿山甲从药典中除名</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum" style="width:20px;height:20px;background-color:chocolate;float:left;text-align:center;font-size:15px;font-weight:bold;color:white;border-radius:4px;">3</div>
                                <a class="top-num-con" href="#">张定宇解读无症状感染者病毒培养</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum-four">4</div>
                                <a class="top-num-con" href="#">北京中小学7月11日开始放暑假</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum-four">5</div>
                                <a class="top-num-con" href="#">内蒙古市民井盖上煎蛋</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum-four">6</div>
                                <a class="top-num-con" href="#">坠亡大学生曾在考场哭了20分钟</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum-four">7</div>
                                <a class="top-num-con" href="#">今年208家房企破产</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum-four">8</div>
                                <a class="top-num-con" href="#">世卫组织称全球新冠疫情正在恶化</a>
                            </li>
                            <li>
                                <br /><br />
                                <div class="topnum-four" style="width:20px;height:20px;background-color:#666;float:left;text-align:center;font-size:15px;font-weight:bold;color:white;border-radius:4px;">9</div>
                                <a class="top-num-con" href="#">谢娜模仿刘敏涛</a>
                            </li>
                            <li>
                                <br /><br />
                                <a href="#" style="float:left;margin-left:90px;font-size:16px;color:rgba(102, 102, 102, 0.61);font-weight:bold;">查看更多热搜...</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(".inputMailList").mailAutoComplete();//使用方法
    </script>
    <script type="text/javascript">
        myFocus.set({
            id: 'tqq',
            pattern: 'mF_sd_tqq',
            time: 3
        });
    </script>
</body>
</html>
